@use '../utils/font_variables';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

// LEGEND STYLING (positioning is in chart-container.scss)
$green-cyan: #06d092;
$cerulean: #02a8ef;
$blue-500: var(--token-color-palette-blue-500);
$purple-300: var(--token-color-palette-purple-300);

.legend-container {
  .dots {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
  }
  .legend-new_clients {
    background-color: $blue-500;
  }
  .legend-entity_clients {
    background-color: $blue-500;
  }
  .legend-non_entity_clients {
    background-color: $green-cyan;
  }
  .legend-secret_syncs {
    background-color: $purple-300;
  }
  .legend-acme_clients {
    background-color: $cerulean;
  }
}

.chart-tooltip {
  background-color: hsl(0, 0%, 4%);
  color: white;
  font-size: size_variables.$size-9;
  padding: 6px;
  border-radius: size_variables.$radius-large;
  flex-wrap: nowrap;
  width: fit-content;

  .bold {
    font-weight: font_variables.$font-weight-bold;
  }
  // styling below handles tooltip position
  position: absolute;
  transform-style: preserve-3d;
  bottom: 30px;
  left: -20px;
  pointer-events: none;
  width: 140px;
  transform: translate(calc(1px * var(--x, 0)), calc(-1px * var(--y, 0)));
  transform-origin: bottom left;
  z-index: 100;
  margin-bottom: size_variables.$spacing-8;
}

.chart-tooltip-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 9px solid hsl(0, 0%, 4%);
  position: absolute;
  opacity: 0.8;
  bottom: -9px;
  left: calc(50% - 5px);
}

// LINEAL STYLING //
.lineal-chart {
  position: relative;
  padding: 10px 10px 20px 50px;
  width: 100%;
  svg {
    overflow: visible;
  }
}

.lineal-chart-bar {
  fill: var(--token-color-palette-blue-500);
}

.lineal-axis {
  color: var(--token-color-palette-neutral-400);
  text {
    font-size: 0.75rem;
  }
  line {
    color: var(--token-color-palette-neutral-300);
  }
}

// @colorScale arg for Lineal::VBars is "stacked-bar", indices are added by lineal
.stacked-bar-1 {
  color: $blue-500;
  fill: $blue-500;
}
.stacked-bar-2 {
  color: $green-cyan;
  fill: $green-cyan;
}
.stacked-bar-3 {
  color: $purple-300;
  fill: $purple-300;
}
.stacked-bar-4 {
  color: $cerulean;
  fill: $cerulean;
}
